<!--
 * @Author: ryo
 * @Date: 2021-11-19 12:30:41
 * @LastEditors: ryo
 * @LastEditTime: 2021-11-25 14:00:34
 * @Description: 全局header组件
 * @FilePath: \site\src\components\common\Header.vue
-->
<template>
  <v-app-bar app color="white" elevate-on-scroll>
    <v-app-bar-nav-icon
      @click="handleToggleDrawer"
      class="d-md-none"
    ></v-app-bar-nav-icon>
    <div class="mx-auto d-none d-md-flex header_box">
      <v-img
        alt="Vuetify Logo"
        class="shrink mr-6"
        contain
        src="/images/logo.png"
        transition="scale-transition"
        width="40"
      />
      <v-tabs grow hide-slider color="red">
        <v-tab v-for="tab in tabsModel.list" :key="tab.title" :to="tab.link">
          {{ tab.text }}
        </v-tab>
      </v-tabs>
    </div>
  </v-app-bar>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      tabsModel: {
        list: [
          { text: '首页', link: '/' },
          { text: '企业介绍', link: '/company' },
          { text: '荣誉资质', link: '/honor' },
          { text: '产品中心', link: '/product' },
          { text: '解决方案', link: '/scheme' },
          { text: '项目业绩', link: '/performance' },
          { text: '联系我们', link: '/contact' }
        ]
      }
    };
  },
  methods: {
    handleToggleDrawer() {
      this.$emit('toggleDrawer', true);
    }
  }
};
</script>

<style lang="scss" scoped>
.header {
  &_box {
    width: 1200px;
  }
}
</style>
